<template>
    <div class="ADhandling" v-if="EventList">
        <!-- 反映列表 -->
        <div class="conList" v-for="item in EventList.EVENTFLOW_LIST" :key="item.CREATETIME">
            <Row class="one" type="flex" align="middle">
                <Col span=2>
                    <!-- 头像 -->
                    <Icon class="tou" type="android-contact"></Icon>
                </Col>
                <Col span=15>
                    {{item.NAME}}
                </Col>
                <Col span=6 class="right-complate" v-if="item.EVENTFLOW_STATUS === 1">
                    已处理
                </Col>
                <Col span=6 class="right" v-if="item.EVENTFLOW_STATUS === 2">
                    提出建议
                </Col>
                <Col span=6 class="right-wait" v-if="item.EVENTFLOW_STATUS === 0">
                    待处理
                </Col>
                <Col span=6 class="right-complate" v-if="item.EVENTFLOW_STATUS === 3">
                    已评价
                </Col>
            </Row>
            <Row class="two" type="flex" align="middle">
                <Col offset=2>
                    {{item.CREATETIME}}
                </Col>
            </Row>
            <Row class="three" type="flex" align="middle" v-if="item.EVENTFLOW_CONTENT">
                <Col offset=2 span=21>
                    <div class="info">
                        {{item.EVENTFLOW_CONTENT}}
                    </div>
                </Col>
            </Row>
        </div>
    </div>
</template>

<script>
export default {
    props: ['EventList']
}
</script>

<style lang="less">
    .ADhandling{
        background-color: #fff;
        padding-left: 20px;
        .tou{
            background-color: #0093dd;
            border-radius: 100%;
            color: #fff;
            font-size: 15px;
            padding: 3px 5px;
        }
        .conList{
            border-bottom: 1px solid #eaeaea;
            .one{
                padding: 10px 0;
                font-size: 14px;
                // font-weight: bold;
                color: #0093dd;
                .right{
                    color: #000;
                    text-align: right;
                }
                .right-complate{
                    color: #19be6b;
                    text-align: right;
                }
                .right-wait{
                    color: red;
                    text-align: right;
                }
            }
            .two{
                color: #999;
            }
            .three{
                padding: 10px 0;
                .info{
                    position: relative;
                    text-indent: 1em;
                    padding: 5px 10px;
                    background-color: #f8f8f8;
                    line-height: 1.8em;
                    color: #9e9999;
                    word-wrap: break-word;
                    &:after{
                        content: '';
                        position: absolute;
                        bottom: 100%;
                        left: 15px;
                        width: 0;
                        height: 0;
                        border-top: 5px solid transparent;
                        border-right: 5px solid transparent;
                        border-left: 5px solid transparent;
                        border-bottom: 5px solid #f8f8f8;
                    }
                }
            }
        }
    }
</style>
